<!-- 团队赛积分 -->
<template>
  <!-- 提示弹窗 -->
  <uni-popup ref="popup">
    <div class="content">
      <div class="title">进入嗨喵app完成任务</div>
      <div class="tip">
        <div class="para">请在客服聊天窗口回复:</div>
        <div class="para">"嗨喵app"</div>
      </div>
      <button class="open-btn" open-type="contact" @click="close">进入嗨喵App</button>
    </div>
  </uni-popup>
</template>

<script setup lang="ts">
/** 当前组件实例 */
const currentInstance = getCurrentInstance();

/** 弹窗打开 */
const open = () => {
  const popup = currentInstance?.refs.popup as UniHelper.UniPopupInstance;
  if (popup.open) {
    popup.open();
  }
};

/** 弹窗关闭 */
const close = () => {
  const popup = currentInstance?.refs.popup as UniHelper.UniPopupInstance;
  if (popup.close) {
    popup.close();
  }
};

defineExpose({
  open,
  close,
});
</script>

<style scoped lang="scss">
.content {
  width: 658rpx;
  width: 504rpx;
  height: 398rpx;
  background-color: #fff;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  position: relative;
  .title {
    position: absolute;
    top: 40rpx;
    font-weight: 600;
  }
  .tip {
    line-height: 50rpx;
    margin-top: 100rpx;
  }
  .para {
    text-align: center;
  }
  button {
    width: 320rpx;
    height: 81rpx;
    background: linear-gradient(270deg, #272fd9 0%, #864ce4);
    color: #fff;
    font-size: 30rpx;
    margin-top: 40rpx;
    border-radius: 40rpx;
    outline: none;
    border: none;
  }
}
</style>
